
import { useState } from 'react';
import { getData2, selectOptions } from '../Data'
import { useMount, useReactive } from 'ahooks';


import { FlexGrid } from "@grapecity/wijmo.react.grid";
import { CollectionView } from "@grapecity/wijmo";

import { Select, InputNumber } from 'antd'

const WijmoM02 = () => {
    const InitData = useReactive({
        init: null,
        data: {}
    })

    const [Data, setData] = useState()
    useMount(() => { setData(getData2(200)) })


    const init = (init) => { InitData.init = init }

    const onSelectionChanged = (e) => { InitData.data = e.collectionView.currentItem }

    const onChange = (e) => {
        const init = InitData.init.collectionView
        init.editItem(init.currentItem);
        init.currentItem.country = e;
        init.commitEdit();
    }


    return (
        <div className="Page">
            <FlexGrid
                initialized={init}
                itemsSource={Data}
                selectionMode={'Row'}
                isReadOnly={true}
                selectionChanged={onSelectionChanged}
            />
            <div className='Label'>
                <label htmlFor=""> Country : </label>
                <Select options={selectOptions} value={InitData.data.country} onChange={onChange} />
            </div>
            <div className='Label'>
                <label htmlFor=""> Downloads : </label>
                <InputNumber value={InitData.data.downloads || 0} />
            </div>
            <div className='Label'>
                <label htmlFor=""> Sales : </label>
                <InputNumber value={InitData.data.sales || 0} />
            </div>
        </div>
    );
};

export default WijmoM02